<template>
	<view class="contaner">
		<view class="user">
			<view class="left-img">
				<image src="" mode="widthFix" class="image"></image>
			</view>
			<view class="rig-text">
				<text class="name">{{yisen.name}}</text>

				<text class="type">{{yisen.type}}</text>
			</view>
		</view>
		<text class="user-text">医生简介：{{yisen.content}}</text>
		<view class="user-tag">
			<text :class="{text1:index==0,text2:index==1,text3:index==2}" v-for="(item,index) in yisen.tagli" :key="index">{{item}}</text>
			
		</view>
	</view>
	<view class="compose">
		<view class="theader">
			<text class="bar left-bb"></text>
			<text class="yuan left-yy"></text>
			<text class="yuan left-yd"></text>
			<text>医生近期排班</text>
			<text class="bar right-bb"></text>
			<text class="yuan right-yy"></text>
			<text class="yuan right-yd"></text>
		</view>
		<view class="tbody" v-for="item in paiban" :key="item.sched_id">
			<view class="top-tb">
				<text>{{item.sched_date}} {{item.day}} <text class="count" v-if="item.time!=0">{{item.time}}天后</text> <text class="count" v-else>今日</text></text>
				<text class="price">￥{{yisen.price}}</text>
			</view>
			<view class="">
				<button class="mini-btn dis-btn"  size="mini" v-if="item.num==0" disabled="true" >约满</button>
				<button class="mini-btn"  size="mini" @click="openPop(item)" v-else>剩余 {{item.num}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		props:['yisen','paiban'],
	    setup(props,context) {
			
	    	const openPop=(obj)=>{
				console.log(obj);
				
				context.emit('openPop',props.yisen,obj)
			}
			
			return {
				openPop
			}
	    }
	}
</script>

<style lang="scss">
	.contaner {
		box-sizing: border-box;
		padding: 0 24rpx 32rpx;
		border-radius: 20rpx;
		border: 1px solid #F0F8FF;
		margin-bottom: 24rpx;
        bbackground-color: #fff;
		box-shadow: 0 12px 12px 12px rgba(173,203,244,0.1);
		.user {
			height: 160rpx;
			display: flex;
			align-items: center;

			display: flex;
		}

		.left-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background-color: #eee;
			margin-right: 20rpx;

			.image {
				width: 100%;
				height: 100%;
			}
		}

		.rig-text {
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			.name {
				font-size: 34rpx;
				margin-right: 10rpx;
				font-size: 30rpx;
			}

			.type {
				font-size: 28rpx;
				color: #999;
				margin-top: 8rpx;
			}

			.content {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #aaa;
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}

		.user-text {
			padding-bottom: 32rpx;
			color: #aaa;
			font-size: 28rpx;
			line-height: 1.5;
		}

		.user-tag {
			padding: 36rpx 0;
			text{
				padding: 8rpx 32rpx;
				
				font-size: 24rpx;
				line-height: 1;
				
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.text1{
				background-color: #CCFFFF;
				color: #0066CC;
			}
			.text2{
				background-color: #FFFF99;
				color: #FF6600;
			}
			.text3{
				background-color: #FFCCCC;
				color: #FF0033;
			}
		}
	}
.compose{
	box-sizing: border-box;
	border-radius: 20rpx;
	border: 1px solid #F0F8FF;
	margin-top: 48rpx;
	.theader{
		position: relative;
		height:120rpx;
		line-height: 140rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		.bar{
			position: absolute;
			width: 12rpx;
			height: 120rpx;
			background-color: #f8f8f8;
			box-shadow: 1px 1px 1px 1px rgba(173,203,244,0.3);
			// border: 1px solid #0066ff;
			top: -90rpx;
			border-radius: 7rpx;
			z-index: 31;
		}
		.left-bb {
			left: 60rpx;
		}
		.right-bb{
			right: 60rpx;
		}
		.yuan{
			position: absolute;
			width: 28rpx;
			height: 28rpx;
			background-color: #ccc;
			top: -98rpx;
			border-radius: 14rpx;
			z-index: 30;
			box-shadow: 1px 1px 1px 1px rgba(200,230,244,1);
		}
		.left-yy {
			left: 52rpx;
		}
		.right-yy{
			right: 52rpx;
		}
		.left-yd {
		    top: 12rpx;
			left: 52rpx;
		}
		.right-yd{
			top: 12rpx;
			right: 52rpx;
		}
	}
	.tbody {
		height: 140rpx;
		padding: 0 24rpx;
		background-color: #f4f4f4;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e0e0e0;
		.top-tb{
			display: flex;
			flex-flow: column;
			color: #444;
			.count{
				padding: 8rpx 32rpx;			
				font-size: 24rpx;
				line-height: 1;
				border-radius: 20rpx;
				margin-left: 20rpx;
				background-color: #e0e0e9;
				color: #0066ff;
			}
			.price{
				color: #FF0033;
				margin-top: 12rpx;
			}
			
		}
		button{
			color: #fff;
			background-color: #0066ff;
			width: 160rpx;
		}
		::v-deep .mini-btn::after{
			border: none;
		}
		.dis-btn{
			background-color: #cfcfcf;
			color: #666;
		}
	}
}
</style>
